<template>
  <el-pagination
    v-model:current-page="currentPage"
    v-model:page-size="pageSize"
    :page-sizes="[100, 200, 300, 400]"
    :size="size"
    layout="total, sizes, prev, pager, next, jumper"
    :total="400"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import type {   ComponentSize } from 'element-plus'
import {defineEmits} from 'vue'

 const emit = defineEmits(["pageValue","currentvalue"])
 
const currentPage = ref(4)
const pageSize = ref(100)
const size = ref<ComponentSize>('default')

const handleSizeChange = (val: number) => {
  emit("pageValue",val)
}
const handleCurrentChange = (val: number) => {
  emit("currentvalue",val)
}
</script>

<style scoped>
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
</style>